import React from 'react'
import { Breadcrumb, Table,Button,Modal,message,Popconfirm,Input} from 'antd';
import { Link } from 'react-router-dom';
import AddUser from './AddUser.js'
import UpdateUser from './UpdateUser.js'
import SetRole from './SetRole.js';
//引入connect用于连接UI组件与redux
import {connect} from 'react-redux'
import { LoadUserActionAsync,deleteUserActionAsync,searchUserActionAsync } from '../../../redux/action/userAction'
const { Search } = Input;
function UserMgr(props) {
  const [params,setParams] = React.useState({page:1,limit:4})
  const [showAddUserDialog,setshowAddUserDialog] = React.useState(false)
  const [selectedRowKeys,setSelectedRowKeys] = React.useState([])
  const [selectedRows,setSelectedRows] = React.useState([])
  const [selectedRowKey,setSelectedRowKey] = React.useState([])
  const [showEditUserDialog,setShowEditUserDialog] = React.useState(false)
  const [setRoleDialog,setSetRoleDialog] = React.useState(false)
  const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    ellipsis:true,
    align:'center'
  },
  {
    title: '电话',
    dataIndex: 'username',
    ellipsis:true,
    align:'center',
  },
  {
    title: '邮箱',
    dataIndex: 'email',
    ellipsis:true,
    align:'center',
  },
  {
    dataIndex: 'avatar',
    title: '头像',
    ellipsis:true,
    align:'center',
    render:(record)=><img src={record} alt='' style={{width:'50px',height:'50px',borderRadius:'50%'}}/>
  },
  {
    dataIndex: 'del',
    title:'编辑',
    align:'center',
    render:(del,row)=>{
      return(
        <div>
          <Button type='primary' style={{marginRight:'15px'}} onClick={()=>{
            setShowEditUserDialog(true)
            setSelectedRowKey([row.key])
          }}>编辑</Button>
          <Popconfirm
            onConfirm={()=>{
              deleteUser(row.key)
            }}
            okText='确认'
            cancelText='取消'
            title='你确认要删除吗?'
          >
              <Button type='danger'>删除</Button>
          </Popconfirm>
        </div>
      )
    }
  }
  ];
  const userRowSelection={
    onChange:(selectedRowKeys,selectedRows)=>{
      setSelectedRowKeys(selectedRowKeys)
      setSelectedRows(selectedRows)
    }
  }
  React.useEffect(() => {
    props.LoadUserActionAsync(params)
  },[])
  async function changePage(page,pageSize){

    await setParams({page,pageSize})
    props.LoadUserActionAsync(params)
  }
  let Buttonstyle={margin:"15px"}
  function hideAddUserDialog(){
    setshowAddUserDialog(false)
  }
  const handleDelete=()=>{
    if(selectedRowKeys.length<=0)
    {
      message.warn('你还未选中任何数据')
      return
    }
    Modal.confirm({
      title:'你确定要删除吗?',
      okText:'删除',
      cancelText:'取消',
      onOk:()=>{
        props.deleteUserActionAsync(selectedRowKeys)
        props.LoadUserActionAsync()
        setSelectedRowKeys([])
      }
    })
  }
  const deleteUser=(key)=>{
    props.deleteUserActionAsync([key])
    props.LoadUserActionAsync()
    message.success('删除成功!')
  }
  const handleSetRole=()=>{
    if(selectedRowKeys.length!==1){
      message.warn('请选择一条数据设置!')
      return
    }
    
    setSetRoleDialog(true)
  }
  const updateUser=()=>{
    if(selectedRowKeys.length<=0)
    {
      message.warn('你还未选中任何数据')
      return
    }
    if(selectedRowKeys.length===1)
    {
      setShowEditUserDialog(true)
      setSelectedRowKey(selectedRowKeys)
    }
    else{
      message.error('你不能选择多条数据修改!')
    }
  }
  return (
    <div className='admin_userMgr'>
      <Breadcrumb>
        <Breadcrumb.Item>
          <Link to='/home'>首页</Link>
        </Breadcrumb.Item>
        <Breadcrumb.Item>
          <Link to='/home/user_mgr'>用户管理</Link>
        </Breadcrumb.Item>
      </Breadcrumb>
      <hr/>
    <Button type="primary" onClick={()=>{setshowAddUserDialog(true)}} style={Buttonstyle}>添加</Button>
    <Button type="danger" style={Buttonstyle} onClick={handleDelete}>删除</Button>
    <Button type="primary" style={Buttonstyle} onClick={updateUser}>修改</Button>
    <Button type="primary" style={Buttonstyle} onClick={handleSetRole}>设置角色</Button>
    <Search placeholder='搜索/按姓名/电话/邮箱'
      style={{margin:'15px',width:'300px'}}
      enterButton
      onSearch={(value,e)=>{let v={value};props.searchUserActionAsync(v)}}
    ></Search>
    <Button type="primary" style={Buttonstyle} onClick={()=>{props.LoadUserActionAsync(params)}}>显示全部</Button>
    <Table 
      dataSource={props.userList} 
      columns={columns} 
      rowSelection={{
        type: 'checkbox',
        ...userRowSelection,
      }}
      rowClassName='rowStyle'
      rowKey='key'
      pagination = {{pageSize:4,onChange:changePage}}
    />
    <AddUser visible={showAddUserDialog} close={hideAddUserDialog}></AddUser>
    <UpdateUser visible={showEditUserDialog} selectedRowKey={selectedRowKey} close={()=>{
      setShowEditUserDialog(false)
    }}></UpdateUser>
    <SetRole visible={setRoleDialog} user_name={selectedRows.length===1?selectedRows[0].name:''} user_key={selectedRowKeys[0]} close={()=>{setSetRoleDialog(false)}}></SetRole>
    </div>
  )
}
//使用connect()()创建并暴露一个Count的容器组件
export default connect(
	state => ({
    userList:state.userList
	}),
	{LoadUserActionAsync,deleteUserActionAsync,searchUserActionAsync}
)(UserMgr)